<template>
  <el-dialog v-model="dialog" width="500">
    <el-form :model="formData" label-position="right" label-width="auto">
      <el-form-item label="设备类型">
        <el-select v-model="formData.generation_type">
          <el-option value="Wind power" label="风电"></el-option>
          <el-option value="Thermal power" label="火电"></el-option>
          <el-option value="Hydroelectric power" label="水电"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发电功率">
        <el-input v-model="formData.power_output">
          <template #append> KW </template>
        </el-input>
      </el-form-item>
      <el-form-item label="电压">
        <el-input v-model="formData.voltage">
          <template #append> V </template>
        </el-input>
      </el-form-item>
      <el-form-item label="电流">
        <el-input v-model="formData.current">
          <template #append> A </template>
        </el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <slot></slot>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from "vue";

type FormData = Record<string, any>;
export interface Expose {
  open: () => void;
  close: () => void;
  updateFormData: (obj: FormData) => void;
  getFormData: () => FormData;
}

const dialog = ref(false);
const formData = ref<FormData>({});

const open = () => {
  dialog.value = true;
};

const close = () => {
  dialog.value = false;
};

const updateFormData: Expose["updateFormData"] = (obj) => {
  formData.value = obj;
};

const getFormData = () => {
  return formData.value;
};

defineExpose({
  open,
  close,
  updateFormData,
  getFormData,
});
</script>

<style scoped></style>
